<template>
    <div class="logistical-container layout-padding">
        <div class="mb15">
            <TableSearch :search="state.tableData.search" @search="onSearch" />

            <el-button size="default" type="success" class="ml10" @click="addLogistical()">
                <el-icon>
                    <ele-FolderAdd />
                </el-icon>
                新增物流商
            </el-button>
        </div>

        <div class="logistical-padding layout-padding-view layout-padding-auto">
            <Table ref="tableRef" v-bind="state.tableData" class="logistical">

                <template v-slot:tableOperate="row">
                    <el-button size="small" text type="primary" @click="onOpenAddLogistical(row.row.id)">
                        编辑
                    </el-button>
                    <el-popconfirm title="确定删除吗？" @confirm="onTableDelRow(row.row)">
                        <template #reference>
                            <el-button size="small" text type="primary">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </Table>
        </div>
        <LogisticalDialog ref="logisticalDialogRef" @refresh="getTableData" />
    </div>
</template>

<script setup lang="ts" name="logistical">
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useLogisticalApi } from '/@/api/mainData/logistical';

// 引入 api 请求接口
const logisticalApi = useLogisticalApi();

// 引入组件
const TableSearch = defineAsyncComponent(() => import('/@/components/table/search.vue'));
const Table = defineAsyncComponent(() => import('/@/components/table/index.vue'));
const LogisticalDialog = defineAsyncComponent(() => import('/@/views/mainData/logistical/component/logisticalDialog.vue'))

// 定义变量内容
const router = useRouter();
const tableRef = ref<RefType>();
const logisticalDialogRef = ref();
const state = reactive<TableDemoState>({
    tableData: {
        data: [],
        header: [
            { key: 'name', colWidth: '', title: '物流商名称', type: 'text', isCheck: true },
            { key: 'code', colWidth: '', title: '物流商编码', type: 'text', isCheck: true },
            { key: 'paymentTerm', colWidth: '', title: '帐期', type: 'text', isCheck: true },
            { key: 'phoneNum', colWidth: '', title: '手机号', type: 'text', isCheck: true },
            { key: 'companyName', colWidth: '', title: '公司名称', type: 'text', isCheck: true },
            { key: 'address', colWidth: '', title: '地址', type: 'text', isCheck: true },
        ],
        config: {
            total: 0,               // 列表总数
            loading: true,          // loading 加载
            isBorder: false,        // 是否显示表格边框
            isSerialNo: true,       // 是否显示表格序号
            isSelection: false,     // 是否显示表格多选
            isOperate: true,        // 是否显示表格操作栏
        },
        search: [
            {
                label: '物流商名称', prop: 'name', placeholder: '支持模糊搜索', required: false, type: 'input', defaultVal: '',
            },
        ],
        param: {
            pageNum: 1,
            pageSize: 10,
        },
        printName: '物流商管理',
    },
});

//搜索
const onSearch = (data: EmptyObjectType) => {
    state.tableData.param.type = data.type;
    getTableData();
};

// 初始化列表数据
async function getTableData() {
    state.tableData.config.loading = true;

    const result = await logisticalApi.queryLogisticalList(state.tableData.param);
    if (result.data == null)
        return Promise.resolve(true);

    const logisticalList: Logistical[] = result.data.rows;
    state.tableData.data = logisticalList;
    state.tableData.config.total = result.data.total;
    setTimeout(() => {
        state.tableData.config.loading = false;
    }, 500);
};

// 打开编辑弹窗
const onOpenAddLogistical = (logisticalId?: number) => {
    const params: EmptyObjectType = { id: logisticalId };
    router.push({
        path: '/mainData/logistical/detail',
        query: params,
    });
};

// 新增物流商
const addLogistical = () => {
    logisticalDialogRef.value.openDialog("add");
}

// 删除当前项回调
async function onTableDelRow(row: EmptyObjectType) {
    const param = {
        id: row.id,
    }
    await logisticalApi.deleteLogistical(param);

    ElMessage.success(`删除${row.name}成功！`);
    getTableData();
};

// 页面加载时
onMounted(() => {
    getTableData();
});
</script>

<style scoped lang="scss">
.logistical-container {
    .logistical-padding {
        padding: 15px;

        .logistical {
            flex: 1;
            overflow: hidden;
        }
    }
}
</style>
